<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no,email=no,address=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="wap-font-scale" content="no">
  <!-- <link rel="stylesheet" href="//static.adbaitai.com/game/Theme/Real/Guaguale/Css/main.css"> -->
  <script>
    !function(e,i){var t=e.documentElement,n=navigator.userAgent.match(/iphone|ipod|ipad/gi),a=n?Math.min(i.devicePixelRatio,3):1,m="orientationchange"in window?"orientationchange":"resize";t.dataset.dpr=a;for(var d,l,c=!1,o=e.getElementsByTagName("meta"),r=0;r<o.length;r++)l=o[r],"viewport"==l.name&&(c=!0,d=l);if(c)d.content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";else{var o=e.createElement("meta");o.name="viewport",o.content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no",t.firstElementChild.appendChild(o)}var s=function(){var e=t.clientWidth;e/a>640&&(e=640*a),window.remScale=e/640,t.style.fontSize=100*(e/750)+"px";window.FootfontSize=100*(e/750);};s(),e.addEventListener&&i.addEventListener(m,s,!1)}(document,window);
  </script>
  <script>
    window.gameJson = {
      "lottery": {
        "title": "幸运大抽奖，红包赚不停",
        "sceneConfig": {
          // "remainColor": "#fff",
          "bgColor": "#7ed6e4",
          "postImg": "//static.adbaitai.com/game/Theme/Pre/Guaguale/Img/%E7%9A%AE.png",
          "startBtn": "//static.adbaitai.com/game/Theme/Pre/Guaguale/Img/%E5%BC%80%E5%A7%8B.png",
          "gameBoxBgColor": "rgba(130,226,248,0.73)",
          "gooodListBgColor": 'rgba(130,226,248,0.92)',
          "topBanner": "//static.adbaitai.com/game/Theme/Pre/Guaguale/Img/testbanner.png"
        },
        "lotteryRewardVOs": [
          {
            "id": 15,
            "iconUrl": '//yun.tuia.cn/tuia-media/img/0ea8pf9412.png',
            "title": "谢谢参与"
          },
          {
            "id": 16,
            "iconUrl": "//yun.tuia.cn/tuia-media/img/0ea8pf9412.png",
            "title": "幸运奖"
          },
          {
            "id": 17,
            "iconUrl": "//yun.tuia.cn/tuia-media/img/0ea8pf9412.png",
            "title": "50元话费"
          },
          {
            "id": 18,
            "iconUrl": "//yun.tuia.cn/tuia-media/img/0ea8pf9412.png",
            "title": "神秘礼包"
          },
          {
            "id": 19,
            "iconUrl": "//yun.tuia.cn/tuia-media/img/0ea8pf9412.png",
            "title": "淘宝优惠券"
          },
          {
            "id": 20,
            "iconUrl": "//yun.tuia.cn/tuia-media/img/0ea8pf9412.png",
            "title": "100元流量包"
          }
        ]
      }
    }
  </script>
</head>
<body lotteryType="scratch">
  <div class="bgBox">
    <img id='topBanner' src="//static.adbaitai.com/game/Theme/Pre/Guaguale/Img/testbanner.png" alt="">
    <!-- <img src="../app/images/mask-img.png" alt="" id='demoImg' style="display:none;">
    <img src="../app/images/mask_img_bg1.png" alt="" id='demoImgTwo' style="display:none;"> -->
    <div class="box">
      <div class="outMainOutBox">
        <div class="gameBox">
          <div class="content" id='canvasBox'>
      				<img id="postImg"  src='//static.adbaitai.com/game/Theme/Pre/Guaguale/Img/%E7%9A%AE.png'/>
      				<!-- <img style='display:none;' id="redux" class="reduxImg" /> -->
              <canvas id="js-scratch-canvas"></canvas>
              <div id="startBtn" data-id='start_btn'></div>
              <p id="remainNum" style="color:#fff;display:block;">今日免费:<span id='remainSpan'></span>次</p>
              <!-- loading -->
              <div id="loading">
              <div id="loading-center">
                <div id="loading-center-absolute">
                  <div class="object" id="object_one"></div>
                  <div class="object" id="object_two"></div>
                  <div class="object" id="object_three"></div>
                  <div class="object" id="object_four"></div>
                </div>
              </div>
            </div>
      		</div>
        </div>
      </div>
      <!-- S=showGoodList -->
      <div class="goodListBoxOne">
        <div class="topTitle">奖品展示</div>
        <div class="swiper-container showGoodBox">
          <div class="swiper-wrapper">
          </div>
      </div>
      </div>
      <!-- E=showGoodList -->
    </div>

  </div>
  <!-- S=outLayer -->
  <div id="outLayerOne" style='display: none;' data-id="ad_content">

    <div id="closeBtn"></div>
    <div class="centerBox">
      <div class="topLight"></div>
      <div class="outlayertopTitle">中奖啦</div>
      <div class="goodDesprect" data-id="ad_title"></div>
      <img class='goodImg' alt="">
      <div class="good-get-btn" data-id="ad_skip"></div>
    </div>
  </div>
  <!-- E=outLayer -->
  <!-- S=noNumOutLayer -->
  <div class="noNumOutBox">
    <div class="noNumOutLayer">
      <div class="noNumCloseBtn"></div>
      <img data-src="//static.adbaitai.com/game/Theme/Real/Guaguale/Img/noNumOutLayer.png" alt="">
    </div>
  </div>
  <!-- E=noNumOutLayer -->
  <!--S=moreGameOutLayer -->
  <div class="moreGameMast">
    <div class="moreGameCloseBtn"></div>
    <div class="moreGameLayer">
        <div class="moreGameList">

        </div>
    </div>
  </div>
  <!--E=moreGameOutLayer -->
  <script src='//static.adbaitai.com/game/Js/zepto.min.js'></script>
  <script src='//static.adbaitai.com/game/Theme/Pre/Guaguale/Js/Scratch.js'></script>
  <!-- <script src='//imgcow.oss-cn-hangzhou.aliyuncs.com/game/Theme/Pre/Guaguale/Js/Scratch.js'></script> -->
</body>
<script>
  var rewardLength = window.gameJson.lottery.lotteryRewardVOs.length,
      rewardSwiper = Math.ceil(rewardLength/4),
      demoSwiper = '';
  // 动态生成奖品列表
  function createGooodListTest(objList) {
    var itemStr = '';
    for(var i=0;i<objList.length;i++){
       itemStr += '<div class="swiper-slide goodItem"><div class="topImgBox"><img src="'+objList[i].iconUrl+'" alt=""></div><p class="goodItemP">'+objList[i].title+'</p></div>';
    }
    return itemStr;
  }
  var wraperObj = document.getElementsByClassName('swiper-wrapper')[0];
  wraperObj.style.cssText = 'width:'+ (2*rewardLength)+'rem';
  wraperObj.innerHTML = createGooodListTest(window.gameJson.lottery.lotteryRewardVOs);
</script>
</html>
